<template>
    <!-- <input type="file" @change="fileInputChange" ref="fileInput"/> -->
    <button @click="handleRead"  ref="rr">读取</button>
    <button @click="setFile">修改</button>
    <textarea  v-model="textArea"></textarea>
</template>

<script lang="ts" setup>
// import 
import {ref,onMounted} from 'vue';
const fileInput = ref();
let textArea = ref();
const fileInputChange = (event) => {
    // // 获取文件对象
    // const file = event.target.files[0];
    // // 创建 FileReader 对象
    // const reader = new FileReader();
    // // 监听 FileReader 加载完成事件
    // reader.addEventListener('load', (event) => {
    //     // 获取文件内容
    //     const fileContent = event.target.result;
    //     textArea.value = fileContent;
    // });
    // // 读取文件
    // reader.readAsText(file);
}
let fileHandle_ = ref();
const handleRead = async () =>{
    let fileHandles = await window.showOpenFilePicker();
    let fileHandle = fileHandles[0];
    fileHandle_.value = fileHandle;
    const file = await fileHandle.getFile();
    const contents = await file.text();
    textArea.value = contents;
}
// fileHandle is an instance of FileSystemFileHandle..
async function writeFile(fileHandle, contents) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Write the contents of the file to the stream.
  await writable.write(contents);
  // Close the file and write the contents to disk.
  await writable.close();
}
const setFile = async () =>{
    writeFile(fileHandle_.value,textArea.value);
}

let rr = ref();
onMounted(()=>{
    // rr.value.click();
    // handleRead();
})
</script>

<style lang="less" scoped>
textarea{
    width: 100%;
    height: 400px;
}
</style>